<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>门诊挂号收费模块</el-breadcrumb-item>
			<el-breadcrumb-item>挂号</el-breadcrumb-item>
		</el-breadcrumb>

		<el-card>
			<!-- 搜索 添加 -->
			<el-row :gutter="20">
				<el-col :span="6">
					<el-input placeholder="请输入病历号" v-model="queryInfo.searchName" clearable @clear="getUserList">
						<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDialogVisible = true">挂号</el-button>
				</el-col>
			</el-row>
			<el-table :data="userlist" border stripe>
				<!-- stripe: 斑马条纹
        border：边框-->
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="casenumber" label="病历号"></el-table-column>
				<el-table-column prop="realname" label="姓名"></el-table-column>
				<el-table-column prop="gender" label="性别"></el-table-column>
				<el-table-column prop="idnumber" label="身份证号"></el-table-column>
				<el-table-column prop="birthdate" label="出生日期"></el-table-column>
				<el-table-column prop="age" label="年龄"></el-table-column>
				<el-table-column prop="agetype" label="年龄类型"></el-table-column>
				<el-table-column prop="homeaddress" label="家庭住址"></el-table-column>
				<el-table-column prop="visitdate" label="本次看诊日期"></el-table-column>
				<el-table-column prop="noon" label="午别"></el-table-column>
				<el-table-column prop="deptid" label="本次挂号科室ID"></el-table-column>
				<el-table-column prop="userid" label="本次挂号医生ID"></el-table-column>
				<el-table-column prop="registleid" label="本次挂号级别ID"></el-table-column>
				<el-table-column prop="settleid" label="结算类别ID"></el-table-column>
				<el-table-column prop="isbook" label="病历本要否"></el-table-column>
				<el-table-column prop="registtime" label="挂号时间"></el-table-column>
				<el-table-column prop="registerid" label="挂号员ID"></el-table-column>
				<el-table-column prop="visitstate" label="本次看诊状态"></el-table-column>
				<el-table-column label="操作" width="120">
					<!-- <template> -->
					<template #default="scope">
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id,scope.row.casenumber,scope.row.realname,scope.row.gender,scope.row.idnumber,scope.row.birthdate,scope.row.age,scope.row.agetype,scope.row.homeaddress,scope.row.visitdate,scope.row.noon,scope.row.deptid,scope.row.userid,scope.row.registleid,scope.row.settleid,scope.row.isbook,scope.row.registtime,scope.row.registerid,scope.row.visitstate)"></el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页区域 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page"
			 :page-sizes="[5, 10, 20, 30]" :page-size="queryInfo.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
		<!-- 添加用户的对话框 -->
		<el-dialog title="添加学生信息" :visible.sync="addDialogVisible" width="62%" @close="addDialogClosed">
			<!-- 内容主题区 -->
			<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" size="small">
				<el-form-item prop="id" label="ID">
					<el-input v-model="addForm.id"></el-input>
				</el-form-item>
				<el-form-item prop="casenumber" label="病历号">
					<el-input v-model="addForm.casenumber"></el-input>
				</el-form-item>
				<el-form-item prop="realname" label="姓名">
					<el-input v-model="addForm.realname"></el-input>
				</el-form-item>
				<el-form-item prop="gender" label="性别">
					<el-input v-model="addForm.gender"></el-input>
				</el-form-item>
				<el-form-item prop="idnumber" label="身份证号">
					<el-input v-model="addForm.idnumber"></el-input>
				</el-form-item>
				<el-form-item prop="birthdate" label="出生日期">
					<el-input v-model="addForm.birthdate"></el-input>
				</el-form-item>
				<el-form-item prop="age" label="年龄">
					<el-input v-model="addForm.age"></el-input>
				</el-form-item>
				<el-form-item prop="agetype" label="年龄类型">
					<el-input v-model="addForm.agetype"></el-input>
				</el-form-item>
				<el-form-item prop="homeaddress" label="家庭住址">
					<el-input v-model="addForm.homeaddress"></el-input>
				</el-form-item>
				<el-form-item prop="visitdate" label="本次看诊日期">
					<el-input v-model="addForm.visitdate"></el-input>
				</el-form-item>
				<el-form-item prop="noon" label="午别">
					<el-input v-model="addForm.noon"></el-input>
				</el-form-item>
				<el-form-item prop="deptid" label="本次挂号科室ID">
					<el-input v-model="addForm.deptid"></el-input>
				</el-form-item>
				<el-form-item prop="userid" label="本次挂号医生ID">
					<el-input v-model="addForm.userid"></el-input>
				</el-form-item>
				<el-form-item prop="registleid" label="本次挂号级别ID">
					<el-input v-model="addForm.registleid"></el-input>
				</el-form-item>
				<el-form-item prop="settleid" label="结算类别ID">
					<el-input v-model="addForm.settleid"></el-input>
				</el-form-item>
				<el-form-item prop="isbook" label="病历本要否">
					<el-input v-model="addForm.isbook"></el-input>
				</el-form-item>
				<el-form-item prop="registtime" label="挂号时间">
					<el-input v-model="addForm.registtime"></el-input>
				</el-form-item>
				<el-form-item prop="registerid" label="挂号员ID">
					<el-input v-model="addForm.registerid"></el-input>
				</el-form-item>
				<el-form-item prop="visitstate" label="本次看诊状态">
					<el-input v-model="addForm.visitstate"></el-input>
				</el-form-item>
			</el-form>
			<!-- 底部区域 -->
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser()">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 修改用户的对话框 -->
		<el-dialog title="修改学生信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
			<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
				<el-form-item prop="id" label="ID">
					<el-input v-model="editForm.id"></el-input>
				</el-form-item>
				<el-form-item prop="casenumber" label="病历号">
					<el-input v-model="editForm.casenumber"></el-input>
				</el-form-item>
				<el-form-item prop="realname" label="姓名">
					<el-input v-model="editForm.realname"></el-input>
				</el-form-item>
				<el-form-item prop="gender" label="性别">
					<el-input v-model="editForm.gender"></el-input>
				</el-form-item>
				<el-form-item prop="idnumber" label="身份证号">
					<el-input v-model="editForm.idnumber"></el-input>
				</el-form-item>
				<el-form-item prop="birthdate" label="出生日期">
					<el-input v-model="editForm.birthdate"></el-input>
				</el-form-item>
				<el-form-item prop="age" label="年龄">
					<el-input v-model="editForm.age"></el-input>
				</el-form-item>
				<el-form-item prop="agetype" label="年龄类型">
					<el-input v-model="editForm.agetype"></el-input>
				</el-form-item>
				<el-form-item prop="homeaddress" label="家庭住址">
					<el-input v-model="editForm.homeaddress"></el-input>
				</el-form-item>
				<el-form-item prop="visitdate" label="本次看诊日期">
					<el-input v-model="editForm.visitdate"></el-input>
				</el-form-item>
				<el-form-item prop="noon" label="午别">
					<el-input v-model="editForm.noon"></el-input>
				</el-form-item>
				<el-form-item prop="deptid" label="本次挂号科室ID">
					<el-input v-model="editForm.deptid"></el-input>
				</el-form-item>
				<el-form-item prop="userid" label="本次挂号医生ID">
					<el-input v-model="editForm.userid"></el-input>
				</el-form-item>
				<el-form-item prop="registleid" label="本次挂号级别ID">
					<el-input v-model="editForm.registleid"></el-input>
				</el-form-item>
				<el-form-item prop="settleid" label="结算类别ID">
					<el-input v-model="editForm.settleid"></el-input>
				</el-form-item>
				<el-form-item prop="isbook" label="病历本要否">
					<el-input v-model="editForm.isbook"></el-input>
				</el-form-item>
				<el-form-item prop="registtime" label="挂号时间">
					<el-input v-model="editForm.registtime"></el-input>
				</el-form-item>
				<el-form-item prop="registerid" label="挂号员ID">
					<el-input v-model="editForm.registerid"></el-input>
				</el-form-item>
				<el-form-item prop="visitstate" label="本次看诊状态">
					<el-input v-model="editForm.visitstate"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editUser()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryInfo: {
					searchName: '',
					page: 1,
					limit: 10
				},
				userlist: [],
				total: 0,
				//控制添加用户对话框的显示与隐藏
				addDialogVisible: false,
				//添加用户的表单数据
				addForm: {
					id: '',
					casenumber: '',
					realname: '',
					gender: '',
					idnumber: '',
					birthdate: '',
					age: '',
					agetype: '',
					homeaddress: '',
					visitdate: '',
					noon: '',
					deptid: '',
					userid: '',
					registleid: '',
					settleid: '',
					isbook: '',
					registtime: '',
					registerid: '',
					visitstate: '',
				},
				addFormRules: {
					id: [{
						required: true,
						message: '请输入ID',
						trigger: 'blur'
					}],
					casenumber: [{
						required: true,
						message: '请输入病历号',
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					gender: [{
						required: true,
						message: '请输入性别',
						trigger: 'blur'
					}],
					idnumber: [{
						required: true,
						message: '请输入身份证号',
						trigger: 'blur'
					}],
					birthdate: [{
						required: true,
						message: '请输入出生日期',
						trigger: 'blur'
					}],
					age: [{
						required: true,
						message: '请输入年龄',
						trigger: 'blur'
					}],
					agetype: [{
						required: true,
						message: '请输入年龄类型',
						trigger: 'blur'
					}],
					homeaddress: [{
						required: true,
						message: '请输入家庭住址',
						trigger: 'blur'
					}],
					visitdate: [{
						required: true,
						message: '请输入本次看诊日期',
						trigger: 'blur'
					}],
					noon: [{
						required: true,
						message: '请输入午别',
						trigger: 'blur'
					}],
					deptid: [{
						required: true,
						message: '请输入本次挂号医生ID',
						trigger: 'blur'
					}],
					userid: [{
						required: true,
						message: '请输入本次挂号医生ID',
						trigger: 'blur'
					}],
					registleid: [{
						required: true,
						message: '请输入本次挂号级别ID',
						trigger: 'blur'
					}],
					settleid: [{
						required: true,
						message: '请输入结算类别ID',
						trigger: 'blur'
					}],
					isbook: [{
						required: true,
						message: '请输入病历本要否',
						trigger: 'blur'
					}],
					registtime: [{
						required: true,
						message: '请输入挂号时间',
						trigger: 'blur'
					}],
					registerid: [{
						required: true,
						message: '请输入挂号员ID',
						trigger: 'blur'
					}],
					visitstate: [{
						required: true,
						message: '请输入本次看诊状态',
						trigger: 'blur'
					}]
				},
				//控制修改对话框的显示与隐藏
				editDialogVisible: false,
				editForm: {
					id: '',
					casenumber: '',
					realname: '',
					gender: '',
					idnumber: '',
					birthdate: '',
					age: '',
					agetype: '',
					homeaddress: '',
					visitdate: '',
					noon: '',
					deptid: '',
					userid: '',
					registleid: '',
					settleid: '',
					isbook: '',
					registtime: '',
					registerid: '',
					visitstate: '',
				},
				editFormRules: {
					id: [{
						required: true,
						message: '请输入ID',
						trigger: 'blur'
					}],
					casenumber: [{
						required: true,
						message: '请输入病历号',
						trigger: 'blur'
					}],
					realname: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur'
					}],
					gender: [{
						required: true,
						message: '请输入性别',
						trigger: 'blur'
					}],
					idnumber: [{
						required: true,
						message: '请输入身份证号',
						trigger: 'blur'
					}],
					birthdate: [{
						required: true,
						message: '请输入出生日期',
						trigger: 'blur'
					}],
					age: [{
						required: true,
						message: '请输入年龄',
						trigger: 'blur'
					}],
					agetype: [{
						required: true,
						message: '请输入年龄类型',
						trigger: 'blur'
					}],
					homeaddress: [{
						required: true,
						message: '请输入家庭住址',
						trigger: 'blur'
					}],
					visitdate: [{
						required: true,
						message: '请输入本次看诊日期',
						trigger: 'blur'
					}],
					noon: [{
						required: true,
						message: '请输入午别',
						trigger: 'blur'
					}],
					deptid: [{
						required: true,
						message: '请输入本次挂号医生ID',
						trigger: 'blur'
					}],
					userid: [{
						required: true,
						message: '请输入本次挂号医生ID',
						trigger: 'blur'
					}],
					registleid: [{
						required: true,
						message: '请输入本次挂号级别ID',
						trigger: 'blur'
					}],
					settleid: [{
						required: true,
						message: '请输入结算类别ID',
						trigger: 'blur'
					}],
					isbook: [{
						required: true,
						message: '请输入病历本要否',
						trigger: 'blur'
					}],
					registtime: [{
						required: true,
						message: '请输入挂号时间',
						trigger: 'blur'
					}],
					registerid: [{
						required: true,
						message: '请输入挂号员ID',
						trigger: 'blur'
					}],
					visitstate: [{
						required: true,
						message: '请输入本次看诊状态',
						trigger: 'blur'
					}]
				},
			}

		},
		created() {
			this.getUserList();
		},
		methods: {
			// getUserList() {
			// 	let url='/register/selectAll'
			// 	let param=this.$qs.stringify(this.addForm);
			// 	this.$axios.post(url,param)
			// 	.then((resp)=>{
			// 		this.userlist=resp.data;
			// 		console.log(resp.data);
			// 	})
			// 	.catch((err)=>{
			// 		console.log('error=',err);
			// 	})
			async getUserList() {
				const {data: res} = await this.$http.post('/register/selectAll', {
					params: this.queryInfo
				});
				console.log(res);
				this.userlist = res;
			},
			handleSizeChange(newSize) {
				//console.log(newSize)
				this.queryInfo.limit = newSize;
				this.getUserList();
			},
			handleCurrentChange(newPage) {
				//console.log(newPage)
				this.queryInfo.page = newPage
				this.getUserList()
			},
			//监听添加用户对话框的关闭事件
			addDialogClosed() {
				this.$refs.addFormRef.resetFields()
			},
			editDialogClosed() {
				this.$refs.editFormRef.resetFields()
			},
			//点击按钮添加新用户
			addUser() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return;
					const {
						data: res
					} = await this.$http.post('/register/add', this.addForm);

					if (res.code != 20000) {
						this.$message.error('添加用户失败！');
					}

					this.$message.success('添加用户成功！');
					//隐藏添加用户的对话框
					this.addDialogVisible = false;
					//重新获取用户列表数据
					this.getUserList();
				})
			},
			//编辑用户按钮
			editUser() {
				this.$refs.editFormRef.validate(async valid => {
					if (!valid) return;
					const {
						data: res
					} = await this.$http.put('/register/update', this.editForm);

					if (res.code != 20000) {
						this.$message.error('修改用户失败！');
					}

					this.$message.success('修改用户成功！');
					//隐藏添加用户的对话框
					this.editDialogVisible = false;
					//重新获取用户列表数据
					this.getUserList();
				})
			},
			//展示编辑用户的对话框
			async showEditDialog(id,casenumber,realname,gender,idnumber,birthdate,age,agetype,homeaddress,visitdate,noon,deptid,userid,registleid,settleid,isbook,registtime,registerid,visitstate) {
				console.log(casenumber);
				// this.editForm.sno = String(sno);
				// this.editForm.sname = String(sname);
				// this.editForm.ssex = String(ssex);
				// this.editForm.sage = String(sage);
				// this.editForm.sdept = String(sdept);
				// this.editForm.syear = String(syear);
				// this.editForm.snation = String(snation);
				// this.editForm.sarea = String(sarea);
				// this.editForm.sdegree = String(sdegree);
				// this.editForm.spolitics_status = String(spolitics_status);
				// this.editForm.sdisciplinary_records = String(sdisciplinary_records);
				// this.editForm.smark = String(smark);
				// this.editDialogVisible = true
			},
			async removeUserById(id) {
				const confirmResult = await this.$confirm('此操作将永久删除该学生信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				//console.log(confirmResult)
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除');
				}

				//console.log('确认了删除')
				const {
					data: res
				} = await this.$http.delete("/register/delete?id=" + id);
				if (res.code != 20000) {
					return this.$message.error("删除失败");
				}
				this.$message.success("删除成功");
				this.getUserList();
			}
		}
	}
</script>
